<template>
  <div>
      <ul>
          <li v-for='(item,index) in list' :key="index" @click='topage(index)' :class="num === index ? 'color' : ''">
              {{item.name}}
          </li>
      </ul>
  </div>
</template>

<script>
export default {
    data(){
        return{
            list:[
                {id:1,name:'一句诗词'},
                {id:2,name:'毒鸡汤'},
                {id:3,name:'励志句子'},
            ],

            num:null
        }
    },
    methods:{
        topage(i){
            this.num=i
            if(i === 0){
                this.$router.push('/portey')
            }else if(i === 1){
                this.$router.push('/dujt')
            }else{
                this.$router.push('/lzjz')
            }
        }
    }
}
</script>

<style scoped lang="scss">
    div{
        margin-top: 20px;
        text-align: center;
        color: gainsboro;
        line-height: 33px;

    }

    .color{
        color: green;
    }

    li{
        &:hover{
            cursor: pointer;
        }
    }
</style>